<template>
  <div class="variableView">
    <div v-if="variable.show==='json'" style="height: inherit;">
      <json-viewer :value="variable.data" copyable />
    </div>
    <div v-else-if="variable.show==='matrix'" style="height: inherit;">
      <matrx-view :data="variable.data" />
    </div>
    <div v-else class="plainView">
      {{ variable.data }}
    </div>
  </div>
</template>

<script>
import MatrxView from './MatrixView.vue';
import JsonViewer from 'vue-json-viewer';
export default {
  name: 'VariableView',
  components: {
    MatrxView,
    JsonViewer
  },
  props: {
    variable: {
      type: Object,
      required: true
    }
  }
};

</script>

<style lang="scss">
.variableView {
  height: inherit;
  white-space: pre;
  word-break: break-word;
  overflow-y: auto;

  .plainView {
    font-family: 'Consolas1';
    height: inherit;
  }
  .light {
    background: #fafafa;
  }
  .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 40px;
  }
  .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 40px;
  }
}
</style>
